import React, {PureComponent} from 'react';
import { render } from 'react-dom';
// export default class Test extends PureComponent{
// 	constructor(){
// 		super();
// 		//组件初始化
// 		//我 ，好像上辈子叛国你   ，只是你。。忘了
// 	}
// 	componentDidMount(){
// 		//组件初始化完成后自动调用
// 		//将定时器添加到实例属性上
// 	 this.timer = setInterval(()=>{
// 		 setState({count: this.state.count + 1})
// 	 },2000)
// 	}
// 	componentDidUpdate(){
// 		//数据更新后
// 		/**
// 		 * 可以在这里：
// 		 * 1. 获取更新后的DOM节点
// 		 * 2. 偶尔也可以更加某些数据的变化来发送请求
// 		 * 
// 		 */
	
// 	}
// 	componentWillUnmount(){
// 		//组件卸载前调用
// 		//可以在这里清除定时器,解绑事件
// 		//2023年4月25日14:48:26
// 		clearInterval(this.timer);
// 	}
// 	shouldComponentUpdate(){
// 		//是否执行后续更新操作，返回false后面的componentDidUpdate不会执行
// 		return true
// 	}
// }
export default function FunctionalComponent() {
    const [count, setCount] = React.useState(0);
    const [name,setName] = React.useState("张三")
     // React.useEffect模拟三个钩子函数：
     // componentDidMount/componentDidUpdate/componentWillUnmount
	 //返回值为一个清除函数
	 
   // 1.当依赖为空数组时,相当于componentDidMount,初始化完毕后执行
   // 清除函数相当于componentWillUnmount
   
    // React.useEffect(()=>{
    //    console.log(" 相当于componentDidMount")
    //     return ()=>{
    //         console.log("这是清除函数")
    //     }
    // },[]);

     // 2.当依赖项传递了有限个依赖的时,相当于componentDidMount和componentDidUpdate的结合体
     // effect函数执行时机：
     //  1. 初始化完毕的时候
     //  2. 依赖项更新的时候
     //  清除函数执行时机：
     //  1. 组件卸载之前
     //  2. 依赖项更新的时候
    // React.useEffect(() => {
    //     
    //     console.log("相当于componentDidMount")
    //     return ()=>{
    //         console.log("这是清除函数")
    //     }
    // }, [count]);
   //    3.当不传递依赖时,相当于componentDidMount和componentDidUpdate的结合体
	  // effect函数执行时机：
	  // 1. 初始化完毕的时候
	  // 2. 任何数据更新的时候 
	  // 清除函数执行时机
	  // 1. 组件卸载之前
	  // 2. 任何数据更新的时候
	  
    React.useEffect(() => {
        console.log("相当于componentDidMount")
        return ()=>{
            console.log("这是清除函数")
        }
    });
	function changecount(){
		setCount(count=>count++)
	}
	render(){
		return (
		<div>{count} <button onClick={changeCount}>修改count</button>
		<div>{name}  <button onClick={()=>setName("张三疯")}>修改名</button></div>
		</div>
		)
	}
}